.box {
    width: 100vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative
}

.box header {
    width: 100vw;
    height: 10vh;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 999
}

.box header .adm-search-bar {
    width: 100%;
    height: 100%
}

.box .logo {
    width: 100%;
    height: 12vh;
    font-size: 20px;
    font-weight: 600;
    z-index: 999;
    background: #fff;
    line-height: 12vh
}

.box main {
    width: 100%;
    height: 100%
}

.box main .adm-capsule-tabs {
    height: 100%;
    width: 100vw
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content {
    margin-top: 5vh
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track .context {
    width: 45vw;
    height: 13vh
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track .context dl {
    width: 90%;
    height: 100%
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track .context dl dt {
    width: 100%;
    height: 70%
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track .context dl dt .adm-image {
    height: 100%
}

.box main .adm-capsule-tabs .adm-capsule-tabs-content .tabs .rv-pull-refresh .rv-pull-refresh__track .context dl dd {
    width: 100%;
    height: 30%;
    text-align: center
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header {
    background: #fff;
    z-index: 999
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .adm-capsule-tabs-header-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .adm-capsule-tabs-header-item .adm-capsule-tabs-header-item-text {
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 8vh;
    font-size: 20px;
    font-weight: 600
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: absolute;
    top: 20vh
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs .context {
    width: 45vw;
    height: 20vh
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs .context dl {
    width: 40vw;
    height: 100%;
    margin-top: 10px
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs .context dl dt {
    width: 100%;
    height: 60%
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs .context dl dt .adm-image {
    width: 100%;
    height: 85%
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header .tabs .context dl dd {
    width: 100%;
    height: 20%;
    text-align: center
}

.box main .adm-capsule-tabs .adm-capsule-tabs-header {
    background: #fff;
    position: fixed;
    top: 15vh;
    z-index: 999
}

.tabbar {
    width: 100vw;
    height: 8vh;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: #fff
}

.tabbar .adm-tab-bar {
    width: 100vw;
    height: 8vh;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: #fff
}